<template>
<div>
<el-row :gutter="10">
  <el-col :span="1">
  </el-col>

<el-col :span="6">
 
  <div class="grid-content ep-bg-purple"></div>
        <div class="center-icon">
        <el-icon :size="40" color="#409EFC"><CoffeeCup /></el-icon>
       </div>
  <el-card class="box-card">
    <template #header>
     
      <div class="card-header">
        <span >堂食</span>
         <el-button class="button" @click="methods.finishOrder()">Finish</el-button>
      </div>
    </template>

    <div class="order-info">
      <div class="order-info-item">取餐号：{{ state.orderTakein.sortNum }}</div>
      <div class="order-info-item">备注：{{ state.orderTakein.postscript }}</div>
      <div class="order-info-item">总数：{{ state.orderTakein.goodsNum }}</div>
      <div class="order-info-item">时间：{{ state.orderTakein.createdAt }}</div>
    </div>

    <div class="order-take-goods">
      <div v-for="(item, index) in state.takeinGoods" :key="index" class="order-goods-item">
        <div class="goods-info">
          <div class="goods-name">{{ item.name }}</div>
          <div class="goods-property">{{ item.property }}</div>
        </div>
        <div class="goods-num">{{ item.number }}</div>
      </div>
    </div>
  </el-card>
</el-col>


  <el-col :span="6">
 
  </el-col>

  <el-col :span="6">
    <div class="grid-content ep-bg-purple" />
      <div class="center-icon">
        <el-icon :size="40" color="#409EFC"><MilkTea /></el-icon>
       </div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>外卖</span>
          <el-button class="button" @click="methods.finishOrder2()">Finish</el-button>
        </div>
      </template>

        <div class="order-info">
              <div class="order-info-item">取餐号：{{ state2.orderTakeout.sortNum }}</div>
              <div class="order-info-item">备注：{{ state2.orderTakeout.postscript }}</div>
              <div class="order-info-item">总数：{{ state2.orderTakeout.goodsNum }}</div>
              <div class="order-info-item">时间：{{ state2.orderTakeout.createdAt }}</div>
            </div>

            <div class="order-take-goods">
              <div v-for="(item, index) in state2.takeoutGoods" :key="index" class="order-goods-item">
                <div class="goods-info">
                  <div class="goods-name">{{ item.name }}</div>
                  <div class="goods-property">{{ item.property }}</div>
                </div>
                <div class="goods-num">{{ item.number }}</div>
              </div>
            </div>
   
   </el-card>
  </el-col>


</el-row>
</div>
</template>

<script setup>
import { h, onMounted, reactive, ref } from 'vue';
import axios from '../../utils/axios';
import { ElMessageBox, ElMessage } from 'element-plus';

const state = reactive({
  orderTakein: [],
  takeinGoods: [],
  myid1: null,
});

const state2 = reactive({
  orderTakeout: [],
  takeoutGoods: [],
  myid2: null,
});



const methods = {
  finishOrder() {
    console.log("finishOrder orderTakein id",state.myid1)
    let id =state.myid1
    console.log("id id",id)
    axios.put(`/orders/update5?id=${id}`)
      .then((res) => {
        console.log("update5",res);
        if (res.code == 200) {
          // refresh table data
          ElMessage.success('制作完成');
          
        } else {
          console.log(res.msg);
          ElMessage.error(res.msg);
        }
        this.refreshTableData();
      })
      .catch((err) => {
        console.log(err);
        ElMessage.error('修改订单失败');
      });
  },
  refreshTableData() {
    axios.get(`/orders/getEarliestOrderIn`)
      .then((res) => {
        console.log('getEarliestOrderIn的res为：', res);
        if (res.code == 200) {
          state.orderTakein = res.data;
          console.log('orderTakein', state.orderTakein);
          state.myid1=state.orderTakein.id
           
          axios.get(`/buyed-goods/${state.orderTakein.id}`)
            .then((res2) => {
              console.log('buyed-goods为：', res2);
              if (res2.code == 200) {
                state.takeinGoods = res2.data;
                console.log('takeinGoods为：', state.takeinGoods);
              }
            })
            .catch((err) => {
              console.log(err);
              state.orderTakein = [];
              ElMessage.error('暂无店内订单');
            });
        } else {
          state.orderTakein = [];
          ElMessage.success('暂无店内订单');
          state.takeinGoods = [];
        }
      })
      .catch((err) => {
        console.log(err);
        ElMessage.error('获取菜单列表失败');
      });
  },
  finishOrder2() {
    console.log("finishOrder orderTakein id2",state2.myid2)
    let id =state2.myid2
    console.log("id id",id)
    axios.put(`/orders/update3?id=${id}`)
      .then((res) => {
        console.log("update3",res);
        if (res.code == 200) {
          // refresh table data
          ElMessage.success('制作完成');
          
        } else {
          console.log(res.msg);
          ElMessage.error(res.msg);
        }
        this.refreshTableData2();
      })
      .catch((err) => {
        console.log(err);
        ElMessage.error('修改订单失败');
      });
  },
  refreshTableData2() {
    axios.get(`/orders/getEarliestOrderOut`)
      .then((res) => {
        console.log('getEarliestOrderOut的res为：', res);
        if (res.code == 200) {
          state2.orderTakeout = res.data;
          console.log('orderTakeout', state2.orderTakeout);
          state2.myid2=state2.orderTakeout.id
           
          axios.get(`/buyed-goods/${state2.orderTakeout.id}`)
            .then((res2) => {
              console.log('buyed-goodsOut为：', res2);
              if (res2.code == 200) {
                state2.takeoutGoods = res2.data;
                console.log('takeGoods为：', state2.orderTakeout);
              }
            })
            .catch((err) => {
              console.log(err);
              state2.orderTakeout = [];
              ElMessage.error('暂无店内订单');
            });
        } else {
          state2.orderTakeout = [];
          ElMessage.success('暂无店内订单');
          state2.takeoutGoods = [];
        }
      })
      .catch((err) => {
        console.log(err);
        ElMessage.error('获取菜单列表失败');
      });
  },
};

onMounted(() => {
  methods.refreshTableData();
  methods.refreshTableData2();
});

</script>

<style>
.center-icon {
  height: 100px;
  margin-left: 170px;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button{
  color: #7ba2e8;
}
.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 15px;
}

.item {
  margin-bottom: 10px;
}

.box-card {
  width: 500px;
  height: 450px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.order-info-item {
  width: 50%;
  margin-bottom: 10px;
}

.order-take-goods {
  display: flex;
  flex-direction: column;
}

.order-goods-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.goods-info {
  display: flex;
  flex-direction: column;
}

.goods-name {
  font-weight: bold;
}

.goods-property {
  font-size: 12px;
  color: #999999;
}

.goods-num {
  font-size: 14px;
  color: #333333;
}

</style>